<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-实现异步请求</title>
    <script src="js/jquery-3.7.1.js"></script>
</head>
<body>
<h1>Ajax-实现异步请求</h1>
<button onclick="getMsg()">原生JS实现异步请求</button>
<button id="btn1">jQuery实现异步请求</button>

<p>响应结果：<span id="jg"></span></p>

<script>
    // 向服务器发起异步请求，请求到 hello.do，获取响应数据
    function getMsg() {
        // 第一：实例化 XMLHttpRequest 对象
        var req = new XMLHttpRequest();

        // 第二：初始化HTTP请求参数 - req.open(请求方式,Servlet访问地址,是否异步)
        req.open("get","hello",true)

        // 第三：发送请求 - req.send([data])
        req.send() ;

        // 第四：设置回调函数 - 监听 readyState 属性
        req.onreadystatechange = function() {
            // req.readyState=4：服务器完成响应
            // req.status=200：Http响应状态，200表示ok
            if(req.readyState == 4 && req.status==200) {
                // 第五：获取服务器响应的数据
                var msg = req.responseText ;

                // 第六：回显数据 - DOM
                document.querySelector("#jg").innerText = msg ;
            }
        }

    }

    // jQuery实现异步请求
    // $.ajax(url,{
    // 属性1：请求方式，默认为get
    // 属性2：请求地址
    // 属性3：是否异步，默认为true
    // 属性4：回调函数，请求成功后，服务器响应的数据会作为参数传递给回调函数
    // })
    $("#btn1").click(function (){
        $.ajax("hello",{
            type:"get",
            success:function(data){
                //console.log(data);
                $("#jg").text(data);
            }
        })
    })




</script>
</body>
</html>